<!DOCTYPE html>
<!-- saved from url=(0037)http://5a8fa9a355aa9.t73.qifeiye.com/ -->
<html class="bit-html mobile-false js_active  vc_mobile  vc_transform  vc_transform  iphorm-js csstransforms csstransforms3d csstransitions no-touch" dir="ltr" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>办公站点</title>
<script src="/js/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="style/style.css" >
	<script src="js/index.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/vue-resource1.5.1"></script>
</head>
<body>
<div id="app">
    <!--头部-->
    <header>
        <div class="logo fleft"><img src="images/logo.png" /> 中移入职管理系统</div>
        <div class="nav fleft ulli">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="report.html">资料报到</a></li>
                <li><a href="input.html">信息录入</a></li>
                <li><a href="articles.html">办公用品</a></li>
                <li><a href="site.html" style="background-color:#2294DC;">办公站点</a></li>
                <li><a href="software.html">软件支持</a></li>
                <li><a href="password.html">系统设置</a></li>
                <li><a href="JavaScript:" class="dakai">二维码</a></li>
            </ul>
        </div>
        <div class="search fleft"><input class="search-keyword" placeholder="搜索"></div>
        <div class="admin fleft"><img src="images/person.png" /><a href="JavaScript:" class="xiala"> admin <img src="images/sanjx.png" /></a></div>

    </header>
    <!--头部-->

    <!--中间-->
    <div class="middle">
        <div class="middle-left fleft">
            <ul>
                <li>快捷导出</li>
                <li><a href="entry.html">入职列表</a></li>
                <li><a href="pay.html">薪酬信息</a></li>
                <li><a href="education.html">学历学位</a></li>
                <li><a href="number.html">账号信息</a></li>
            </ul>
        </div>
        <div class="middle-right fright ulli">
            <div class="find">
                <ul>
                    <li :class="{'type-active':currentStatus==0}" @click="currentStatus=0">全部</li>
                    <li :class="{'type-active':currentStatus==1}" @click="currentStatus=1">办公站点未完成</li>
                    <li :class="{'type-active':currentStatus==2}" @click="currentStatus=2">办公站点完成</li>

                    <li>回收站</li>
                    <li><input class="search-keyword" placeholder="搜索">
                        <button type="button">搜索</button>
                    </li>
                </ul>
            </div>
            <div class="entry">
                <div class="entry-body">
                    <table>
                        <tbody>
                        <tr valign="top">
                            <td>编号</td>
                            <td>姓名</td>
                            <td>性别</td>
                            <td>部门</td>
                            <td>手机</td>
                            <td>Email</td>
                            <td>学历</td>
                            <td>加入时间</td>
                            <td>籍贯</td>
                            <td>操作</td>
                        </tr>
                        <tr valign="top" v-for="emp in emps">
                            <td>{{emp.employeeId}}</td>
                            <td>{{emp.employeeName}}</td>
                            <td>{{emp.employeeGender}}</td>
                            <td>{{emp.department}}</td>
                            <td>{{emp.mobilePhone}}</td>
                            <td>{{emp.email}}</td>
                            <td>{{emp.education}}</td>
                            <td>{{emp.joinMobileTime}}</td>
                            <td>{{emp.nativePlace}}</td>
                            <td><a href="#" class="bj" @click="confirm(emp)" :class="{'disable': emp.officeSiteStatus == 1}">{{emp.officeSiteStatus == 1 ? '办公站点完成':'确认'}}</a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>
            <div class="paglist ulli">
                <ul>
                    <li><a href="#"><<</a></li>
                    <li><a href="#"><</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">></a></li>
                    <li><a href="#">>></a></li>
                </ul>
            </div>
            <div class="foot">Copyright © 中移（成都）产业研究院</div>
        </div>
    </div>
    <!--中间-->

    <!--蒙层-->
    <div class="mengceng">
        <div class="all-table">
            <div class="table-title"><strong>■</strong> 详细档案——张小明 <a href="JavaScript:" class="edit_opoen">编辑</a> <span class="close"><a href="JavaScript:">✖</a></span></div>
            <div class="table-body">
                <iframe src="detailed.html" width="100%" height="100%" scrolling="auto" frameborder="0"></iframe>
            </div>
        </div>
    </div>

    <div class="edit">
        <div class="all-table">
            <div class="table-title"><strong>■</strong> 详细档案——张小明 <span class="edit_close"><a href="JavaScript:">✖</a></span></div>
            <div class="table-body">
                <iframe src="detailed_edit.html" width="100%" height="100%" scrolling="auto" frameborder="0"></iframe>
            </div>
        </div>
    </div>

    <div class="erweima">
        <div class="index-ewm">
            <div class="table-title" style="border:none;"> 信息录入二维码地址 <span class="guanbi"><a href="JavaScript:">✖</a></span></div>
            <img src="images/ewm.png" />
        </div>
    </div>

    <div class="admin-more">
        <ul>
            <li><a href="#">设置</a></li>
            <li><a href="#">退出</a></li>
        </ul>
    </div>
    <!--蒙层-->

</div>
<script>
    new Vue({
        el: '#app',
        data: {
            fileStatus: [{type: "1", "desc": "办公站点未完成"}, {type: "5", "desc": "办公站点完成"}],
            currentStatus: 0,
            emp: {employeeId: ""},
            emps: []
        },
        created: function () {
            this.getEmps();
        },
        methods: {
            getEmps: function () {
                let url = "/employee";
                if (this.currentStatus === 0) {
                    url += "?types=3";
                } else if (this.currentStatus === 1) {
                    url += "?types=3&officeSiteStatus=-1";
                } else if (this.currentStatus === 2) {
                    url += "?types=3&officeSiteStatus=1";
                }

                this.$http.get(url).then(function (res) {
                    this.emps = res.body;
                }, function () {
                    console.log('请求失败处理');
                });
            },
            confirm(emp) {
                if (emp.officeSiteStatus == 1) {
                    return;
                }
                emp.officeSiteStatus=1;
                this.$http.put("/employee/" + emp.id, emp).then(function (res) {
                    alert(emp.employeeName + "办公用品分配完成");

                    let tmpArray = [];

                    for (let i = 0; i < this.emps.length; i++) {
                        if (this.emps[i].id != emp.id) {
                            tmpArray.push(this.emps[i]);
                        }
                    }
                    this.emps = tmpArray;

                }, function () {
                    console.log('请求失败处理');
                });
            }
        },
        computed: {
            changeCurrentStatus() {
                return this.currentStatus;
            }
        },
        watch: {
            changeCurrentStatus(val) {
                this.getEmps();
            }
        }
    });
</script>
</body>

</html>